<template>
  <aside class="layer-directory" :class="{ hidden: !showDirectoryTree }">
    <div class="layer-directory-header">
      <span>图层目录</span>
    </div>
    <div class="layer-directory-content">
      <div class="title-level1">
        <i
          class="iconfont icon-sanjiao01"
          @click="showLevel2 = !showLevel2"
          :class="{ rotate180: showLevel2 }"
        ></i>
        <el-checkbox disabled></el-checkbox>
        <span>地图文档</span>
      </div>
      <div
        class="title-level2-wrapper"
        :style="{ height: level2WrapperHeight }"
        ref="level2Wrapper"
      >
        <div class="title-level2">
          <i
            class="iconfont icon-sanjiao01"
            @click="showLevel2Content = !showLevel2Content"
            :class="{ rotate180: showLevel2Content }"
          ></i>
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
          </el-checkbox>
          <span>光谷智慧交通</span>
        </div>
        <div class="feature-layers" ref="level2Content" :style="{ height: level2ContentHeight }">
          <el-checkbox-group v-model="visibleLayers" @change="handleLayerListChange">
            <el-checkbox v-for="layer in wmsLSParamsLayerArr" :key="layer.name" :value="layer.name">
              <img :src="layerIconUrl(layer.type)" />
              {{ layer.title }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div
      class="right-button"
      @click="showDirectoryTree = !showDirectoryTree"
      :style="{ transform: showDirectoryTree ? ' translate(0, -50%)' : ' translate(100%, -50%)' }"
    >
      <i class="iconfont icon-right button-icon" :class="{ rotate180: showDirectoryTree }"></i>
    </div>
  </aside>
</template>

<script setup>
import { ref, computed, watchEffect, useTemplateRef, onMounted } from 'vue'

import pointLayerIcon from '@/assets/icons/pointLayerIcon.png'
import lineLayerIcon from '@/assets/icons/lineLayerIcon.png'
import polygonLayerIcon from '@/assets/icons/polygonLayerIcon.png'

const level2Wrapper = useTemplateRef('level2Wrapper')
const level2Content = useTemplateRef('level2Content')

const wmsLSPramsLayerStr = defineModel()
const { wmsLSParamsLayerArr } = defineProps({
  wmsLSParamsLayerArr: {
    type: Array,
    required: true,
  },
})

const showDirectoryTree = ref(false)
const showLevel2Content = ref(false)
const showLevel2 = ref(false)
const level2WrapperScrollHeight = ref(0)
const level2ContentScrollHeight = ref(0)

const layerIcons = ref({ pointLayerIcon, lineLayerIcon, polygonLayerIcon })
const checkAll = ref(true)
const isIndeterminate = ref(false)
const visibleLayers = ref(['t0', 't1', 't2', 't3', 't4'])

const layerIconUrl = computed(() => (type) => {
  switch (type) {
    case 'point':
    case 'line':
    case 'polygon':
      return layerIcons.value[`${type}LayerIcon`]
    default:
      return ''
  }
})
const level2ContentHeight = computed(() =>
  showLevel2Content.value ? level2ContentScrollHeight.value + 'px' : 0,
)
const level2WrapperHeight = computed(() =>
  showLevel2.value ? level2WrapperScrollHeight.value + 'px' : 0,
)

const handleCheckAllChange = (status) => {
  visibleLayers.value = status ? wmsLSParamsLayerArr.map((item) => item.name) : []
  isIndeterminate.value = false
}
const handleLayerListChange = (checked) => {
  const checkedCount = checked.length
  checkAll.value = checkedCount === wmsLSParamsLayerArr.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < wmsLSParamsLayerArr.length
}

watchEffect(() => {
  wmsLSPramsLayerStr.value = visibleLayers.value.join(',')
})

onMounted(() => {
  showLevel2Content.value = true
  showLevel2.value = true
  level2ContentScrollHeight.value = level2Content.value.scrollHeight
  //此时在wrapper内容区中的feature-layers元素的高度是零, 为了正确计算高度,还要加上feature-layers的内容区的高度
  level2WrapperScrollHeight.value =
    level2Wrapper.value.scrollHeight + level2Content.value.scrollHeight
})
</script>

<style lang="scss" scoped>
@mixin iconFontMixin {
  display: block;
  width: 1rem;
  height: 1rem;
  font-size: 0.7rem;
  color: #666;
  text-align: center;
  align-content: center;
}
@mixin resetCheckedLabelColor {
  &.is-checked {
    .el-checkbox__label {
      color: unset;
    }
  }
}
.layer-directory {
  position: absolute;
  width: max-content;
  background-color: rgb(255, 255, 255, 0.8);
  border: 1px solid #dcdcdc;
  color: #606266;
  border-radius: 0 5px 5px 0;
  z-index: 100;
  transition: 0.3s;
  &.hidden {
    transform: translateX(-100%);
  }
  .layer-directory-header {
    height: 30px;
    background-color: #409eff;
    padding-left: 0.5rem;
    color: #fff;
    font-size: 13px;
    line-height: 30px;
    border-radius: 0 5px 0 0;
    box-shadow: 2px 2px 3px -1px #999;
  }
  .layer-directory-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    height: 35rem;
    box-shadow: 2px 2px 3px -1px #999;
    border-radius: 0 0 5px 0;
    .title-level1 {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      .icon-sanjiao01 {
        @include iconFontMixin;
        transition: 0.3s;
        &.rotate180 {
          transform: rotate(180deg);
        }
      }
    }
    :deep(.title-level2-wrapper) {
      margin-left: 1.3rem;
      transition: 0.3s;
      overflow: hidden;
      .title-level2 {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        .icon-sanjiao01 {
          @include iconFontMixin;
          transition: 0.3s;
          &.rotate180 {
            transform: rotate(180deg);
          }
        }
        & > span {
          font-size: 0.95rem;
        }
      }
      .feature-layers {
        margin-left: 2.6rem;
        transition: 0.3s;
        overflow: hidden;
        .el-checkbox-group {
          display: grid;
          .el-checkbox {
            @include resetCheckedLabelColor;
          }
        }
      }
    }
  }
  .right-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
    height: 3rem;
    width: 1.3rem;
    background-color: rgb(102, 102, 102, 0.5);
    align-content: center;
    transition: 0.3s;
    color: #fff;
    text-align: center;
    border-radius: 0.3rem;
    cursor: pointer;
    .icon-right {
      display: block;
      transition: inherit;
      &.rotate180 {
        transform: rotate(180deg);
      }
    }
  }
}
</style>
